$(function () {
  var currentPage = 1;
  var pageSize = 5;
  var picArr = [];
  // 1-请求商品数据并渲染
  function render() {
    $.ajax({
      url: '/product/queryProductDetailList',
      data: {
       page: currentPage,
       pageSize: pageSize
      },
      dataType: 'json',
      success: function (info) {
        console.log(info);
        // 渲染
        $('tbody').html(template('tmp',info));
        setPage(info.total);
      }
    })
  }
  render();

  //  点击上架下架按钮后,获取当前数据的id, 记录要进行的操作
  $('tbody').on('click','.button',function () {
    currentId = $(this).parent().data('id');
    status = $(this).hasClass('btn-success') ? 1 : 0; // 1上架 0下架
  });

  // 2-分页功能
  function setPage(total) {
    $('#paginator').bootstrapPaginator({
      bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,//当前页
      totalPages: Math.ceil(total / pageSize),//总页数
      onPageClicked:function(event, originalEvent, type,page){
        //为按钮绑定点击事件 page:当前点击的按钮值
        //记录当前页
        currentPage = page;
        // 渲染
        render();
      }
    })
  }

  // 3-填充二级分类的数据
  $.ajax({
    url: '/category/querySecondCategoryPaging',
    data: {
      page: 1,
      pageSize: 100
    },
    dataType: 'json',
    success: function (info) {
      console.log(info);
      $('.brand-list').html(template('tmp-brand',info));
    }
  });

  // 4 点击二级分类下拉列表,把选中的项的文字赋值给按钮，用隐藏域保存数据的id
    $('.brand-list').on('click','a',function () {
      //  把当前a标签的文字赋值给按钮
     $('.title-text').text($(this).text());
     $('[name="brandId"]').val($(this).data('id'));
    //  品牌id 验证状态设置为通过
    $('#form1').data('bootstrapValidator').updateStatus('brandId','VALID');
    })

  // 5-上传商品图片
  // 商品需要保留最新上传的三张
  $("#file").fileupload({
    dataType:"json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done:function (e, data) {
      console.log(data);
      // 把最新上传的图片添加到数组的最前面
      picArr.unshift(data.result);
      // 显示当前图片
      $('.pic-box').prepend('<img src="'+ data.result.picAddr +'" height="100">');
      // console.log(picArr);
      // 图片大于三张
      if(picArr.length > 3) {
        // 删除最后一个元素
         picArr.pop();
         //图片容器也要删除最后一张图片 remove() 自杀   empty() 清空盒子内部
         $('.pic-box img:last-child').remove();
      }
      // 如果图片的个数等于3,则设置校验为图片验证通过
      if(picArr.length == 3) {
        $('#form1').data('bootstrapValidator').updateStatus('picStatus','VALID');
      }
    }
});

  //  6- 对表单数据进行验证
   $('#form1').bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    //  字段
    fields: {
      // name属性
      brandId: {
        validators: {
          // 非空
          notEmpty: {
            message: '请选择二级分类'
          }
        }
      },
      proName: {
        validators: {
          // 非空
          notEmpty: {
            message: '请输入商品名称'
          }
        }
      },
      proDesc: {
        validators: {
          // 非空
          notEmpty: {
            message: '请输入商品描述'
          }
        }
      },
      num: {
        validators: {
          // 非空
          notEmpty: {
            message: '请输入商品库存'
          },
          //正则校验
          regexp: {
            // 要验证的正则表达式
            regexp: /^[1-9]\d{0,6}$/,
            message: '商品库存必须是非零开头的7位数字'
          }
        }
      },
      size: {
        validators: {
          // 非空
          notEmpty: {
            message: '请输入商品尺码'
          },
          //正则校验
          regexp: {
            regexp: /^[2-4]\d{1}-[2-4]\d{1}$/,
            message: '商品尺码必须是 xx-xx格式： x是数字'
          }
        }
      },
      oldPrice: {
        validators: {
          // 非空
          notEmpty: {
            message: '请输入商品原价'
          },
          regexp: {
            regexp: /^\d+$/,
            message: '商品原价必须是数值'
          }
        }
      },
      price: {
        validators: {
          // 非空
          notEmpty: {
            message: '请输入商品现价'
          },
          regexp: {
            regexp: /^\d+$/,
            message: '商品原价必须是数值'
          }
        }
      },
      picStatus: {
        validators: {
          // 非空
          notEmpty: {
            message: '图片必须上传三张'
          }
        }
      }
    }
   });

  // 7- 表单验证通过后, 向后台发送ajax请求,添加商品数据  
   $('#form1').on('success.form.bv',function (e) {
    //  阻止表单默认行为
     e.preventDefault();
    // 处理数据
    var str = $('#form1').serialize();
    // 把数组中的三张图片的数据转成json字符串,拼接在查询字符串中
    str += '&' + 'picArr=' + JSON.stringify(picArr);
    //ajax请求
    $.ajax({
      url: '/product/addProduct',
      type: 'post',
      data: str,
      dataType: 'json',
      success: function (info) {
        console.log(info );
        // 1- 隐藏模态框
        $('.modal-add').modal('hide');
        // 2- 重新渲染第一页
        currentPage = 1;
        render();
        // 3- 表单重置验证样式和数据
        $('#form1').data('bootstrapValidator').resetForm(true);
        // 4- 手动重置 图片列表 和 下拉列表
        $('.pic-box').empty(); //清空盒子内部
        $('.title-text').text('请选择二级分类');
        // 5- 数组重置
        picArr = []; // 把本次添加的数据清除,避免影响下次判断
      }
    })
   })


})